<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<title>维修保障设备</title>
		<link type="text/css" href="css/content.css" rel="stylesheet" />
		<link type="text/css" href="css/animation.css" rel="stylesheet" />
		<script type="text/javascript" src="js/vue.min.js"></script>
		<script type="text/javascript" src="js/jquery.js" ></script>
	</head>
	<body>
	
		<!--返回-->
		<div class="back" onclick="history.go(-1)"><img th:src="@{/images/back.png}" /></div>
		<div th:include="header :: header"></div>
		<div class="header-title">
			<span>适用性</span>
		</div>
		<div class="spare-a">
			<div class="questions-ar">
				<div class="spare-ara" id="container">
					<div class="spare-ara-a clearfix">
						<div class="spare-ara-al">
							<div class="spare-ara-all"><input type="text" v-model="name" placeholder="请输入关键字" /></div>
							<div class="spare-ara-alr" v-on:click="search(name)"></div>
						</div>
						<div class="spare-ara-ar">
							<a href="#" class="spare-tj">确 定</a>
						</div>
			
					</div>
					<div class="documentation">
						<ul>
						<a v-for="(adapt,index) in adapts">
							<li v-on:contextmenu.prevent="isActive=index" :class="{active:isActive===index}">
								<div class="paper-a">产品：<span>{{adapt.name}}</span></div>
								<div class="documentation-check"></div>
							</li>
						</a>
							
						</ul>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script>
	//待完善
	var container=new Vue({
		el:'#container',
		data:{
			adapts:[],
			isActive:-1,
			name:''
		},
		methods:{
			search:function(name){
				var that=this;
				$.get(encodeURI("/ietm/adapt?name="+name),function(data){//一级
					that.adapts=data;
				});
			}
		},created:function(){
			this.search('')
		}
	});
	</script>
</html>
